import { useState, useEffect } from "react";
import { Form, Input, InputNumber } from "antd";
import { useStore } from "@/store";
import { nanoid } from "nanoid";
import { Drawer } from "@arco-design/web-react";

const ImageModal = ({ visibleImageModal, isAdd, elementsIndex }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [form] = Form.useForm();
  const { powerPointArr, curpowerPointIndex, modifyPowerPoint } = useStore();

  useEffect(() => {
    // 当visibleImageModal为true时，设置modalVisible为true
    if (visibleImageModal) {
      setModalVisible(true);

      // 如果是添加操作，重置表单
      if (isAdd) {
        form.resetFields();
      } else {
        // 编辑进来
        // 获取当前幻灯片元素的信息
        const { blockWidth, blockHeight, describe, imageUrl, xAxis, yAxis } =
          powerPointArr[curpowerPointIndex - 1].elements[elementsIndex];
        // 设置表单的值为当前幻灯片元素的信息
        form.setFieldsValue({
          blockWidth,
          blockHeight,
          describe,
          imageUrl,
          xAxis,
          yAxis,
        });
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visibleImageModal]);

  // 处理取消按钮的点击事件
  const handleCancel = () => {
    // 重置表单字段
    form.resetFields();
    // 设置模态框不可见
    setModalVisible(false);
  };

  // 处理确定按钮点击事件
  const handleOK = () => {
    // 验证表单字段
    form.validateFields().then((values) => {
      // 复制powerPointArr数组
      const newSlideList = [...powerPointArr];
      if (isAdd) {
        // 新增一个元素
        newSlideList[curpowerPointIndex - 1].elements.push({
          sortId: newSlideList[curpowerPointIndex - 1].elements.length + 1, // 排序id
          id: nanoid(),
          type: "Image",
          ...values,
        });
      } else {
        // 修改一个元素
        newSlideList[curpowerPointIndex - 1].elements[elementsIndex] = {
          ...newSlideList[curpowerPointIndex - 1].elements[elementsIndex],
          ...values,
        };
      }
      //  修改一个元素时
      modifyPowerPoint(newSlideList);
      // 关闭模态框
      setModalVisible(false);
    });
  };

  return (
    <Drawer
      // 设置抽屉宽度
      width={500}
      // 设置抽屉标题
      title={"设置图片"}
      // 设置抽屉是否可见
      visible={modalVisible}
      // 设置抽屉取消按钮的回调函数
      onCancel={handleCancel}
      // 设置抽屉确定按钮的回调函数
      onOk={handleOK}
      // 设置抽屉确定按钮的文本
      okText="确定"
      // 设置抽屉取消按钮的文本
      cancelText="取消"
    >
      <Form
        // 设置表单标签的宽度
        labelCol={{ span: 6 }}
        // 设置表单实例
        form={form}
        // 设置表单的初始值
        initialValues={{
          xAxis: 0,
          yAxis: 0,
          // 文本区宽度
          blockWidth: 100,
          // 文本区高度
          blockHeight: 50,
          // 图片地址
          imageUrl: "",
          describe: "",
        }}
      >
        <Form.Item
          label="距左上角水平值"
          name="xAxis"
          rules={[{ required: true, message: "不得为空" }]}
        >
          <InputNumber style={{ width: "100%" }} addonAfter="%" />
        </Form.Item>
        <Form.Item
          label="距左上角垂直值"
          name="yAxis"
          rules={[{ required: true, message: "不得为空" }]}
        >
          <InputNumber style={{ width: "100%" }} addonAfter="%" />
        </Form.Item>
        {/* // 图片宽度表单项 */}
        <Form.Item
          label="图片宽度"
          name="blockWidth"
          rules={[{ required: true, message: "不得为空" }]} // 设置必填规则
        >
          <InputNumber style={{ width: "100%" }} addonAfter="%" />
          {/* // 输入框 */}
        </Form.Item>
        {/* // 图片高度表单项 */}
        <Form.Item
          label="图片高度"
          name="blockHeight"
          rules={[{ required: true, message: "不得为空" }]} // 设置必填规则
        >
          <InputNumber style={{ width: "100%" }} addonAfter="%" />
          {/* // 输入框 */}
        </Form.Item>
        {/* // 图片地址表单项 */}
        <Form.Item
          label="图片地址"
          name="imageUrl"
          rules={[{ required: true, message: "不得为空" }]} // 设置必填规则
        >
          <Input />
          {/* // 输入框 */}
        </Form.Item>
        {/* // 图片描述表单项 */}
        <Form.Item label="图片描述" name="describe">
          <Input />
          {/* // 输入框 */}
        </Form.Item>
      </Form>
    </Drawer>
  );
};

export default ImageModal;
